<template>
	<view class="container">
		<view class="navbar">
			<view 
				v-for="(item, index) in navList" :key="index" 
				class="nav-item" 
				:class="{current: tabCurrentIndex === index}"
				@click="tabClick(index)"
			>
				{{item.text}}
			</view>
		</view>
		
		
		 
		 <!-- 会员介绍 -->
		<view class="nums" v-if="tabCurrentIndex==0"  v-model="tabCurrentIndex">
			<view class="top">
				1.会员等级划分及介绍
			</view>
			<view class="content">
				会员级别共分为4个级别，分别为普通会员、黄金会员、铂金
				
			</view>
			<view class="content">
				会员、经纪人。会员级别由积分决定，积分越高会员等
			</view>
			<view class="content">
				级越高，享受的会员权益越大。会员级别由系统自动处理，无
			</view>
			<view class="content">
				需申请。
			</view>
			<view class="top">
				2.会员等级所对应的积分
			</view>
			<view class="top-top1">
				<view class="top-top">
					<view class="iconfont icon-u-fuben image1 " ></view>  
					<view class="page">普通会员</view>
					<view class="page">1-999</view>
				</view>
				<view class="top-top">
					<view class="iconfont icon-u image1"  ></view>  
					<view class="page">黄金会员</view>
					<view class="page">1000-4999</view>
				</view>
				<view class="top-top">
					<view class="iconfont icon-u2 image1" ></view>  
					<view class="page">铂金会员</view>
					<view class="page">5000-14999</view>
				</view>
				<view class="top-top">
					<view class="iconfont icon-u1 image1" ></view>  
					<view class="page">经纪人</view>
					<view class="page">15000以上</view>
				</view>
			</view>
			<view class="top">
				3.不同等级的会员有哪些特权？
			</view>
			
			<view class="introduce-num">
				<view class="introduce-num1">权益</view><view class="top-introduce-num2">普通会员</view><view class="top-introduce-num3">黄金会员</view><view class="top-introduce-num4">铂金会员</view><view class="top-introduce-num5">经纪人</view>
				
				<view class="introduce-num1">等级标识</view>
				<view class="iconfont iconfont1 icon-u-fuben  introduce-num2"></view>
				<view class="iconfont iconfont1 icon-u  introduce-num3"></view>
				<view class="iconfont iconfont1 icon-u2 introduce-num4"></view>
				<view class="iconfont iconfont1 icon-u1 introduce-num5"></view>
				
				<view class="introduce-num1">满免运费</view><view class="introduce-num2">满199元</view><view class="introduce-num3">满199元</view><view class="introduce-num4">满99元</view><view class="introduce-num5">满69元</view>
				<view class="introduce-num1">签到奖励</view>
				<view class="iconfont  icon-correct-bold introduce-num2"  ></view> 
				<view class="iconfont icon-correct-bold introduce-num3"  ></view> 
				<view class="iconfont icon-correct-bold introduce-num4"  ></view> 
				<view class="iconfont icon-correct-bold introduce-num5"  ></view> 
				<view class="introduce-num1">评价奖励</view><view class="introduce-num2">+5/条</view><view class="introduce-num3">+10/条</view><view class="introduce-num4">+15/条</view><view class="introduce-num5">+20/条</view>
				
				<view class="introduce-num1">专享活动</view><view class="yticon icon-fork introduce-num2"></view>
				<view class="iconfont icon-correct-bold introduce-num3"  ></view> 
				<view class="iconfont icon-correct-bold introduce-num4"  ></view> 
				<view class="iconfont icon-correct-bold introduce-num5"  ></view> 
				
				<view class="introduce-num1">会员特价</view><view class="yticon icon-fork introduce-num2"></view><view class="yticon icon-fork introduce-num3"></view>
				<view class="iconfont icon-correct-bold introduce-num4"  ></view> 
				<view class="iconfont icon-correct-bold introduce-num5"  ></view> 
				<view class="introduce-num1">专享礼包</view><view class="yticon icon-fork introduce-num2"></view><view class="yticon icon-fork introduce-num3"></view><view class="yticon icon-fork introduce-num4"></view>
				<view class="iconfont icon-correct-bold introduce-num5"  ></view>
			</view>
			<view class="top">
				4.每项特权的详细介绍
			</view>	
			<view class="introduce">
				<view class="iconfont icon-u8 "  ></view>  
				<view class="introduce-right">
					<view class="text">等级标识</view>
					<view class="content">每个等级的会员都会有专属标识。</view>
				</view>
			</view>
			<view class="introduce">
				<view class="iconfont icon-mianyunfei "  ></view>  
				<view class="introduce-right">
					<view class="text">减免运费</view>
					<view class="content">1）运费收取的判断标准为：用户购买商品单笔订单</view>
					<view class="content">总金额（按减去直降和返现促销的金额）。</view>
					<view class="content">2）不同等级会员满免运费标准如下：</view>
					<view class="content">普通会员: 199元/每笔</view>
					<view class="content">黄金会员: 199元/每笔</view>
					<view class="content">铂金会员: 99元/每笔</view>
					<view class="content">经纪人: 69元/每笔</view>
				</view>
			</view>
			<view class="introduce">
				<view class="iconfont icon-u4 "  ></view>  
				<view class="introduce-right">
					<view class="text">签到奖励 </view>
					<view class="content">1）会员每天最多可签到1次，签到后获得相应的奖</view>
					<view class="content">励。</view>
					<view class="content">2）连续签到多天可获得额外的奖励。</view>
				</view>
			</view>
			<view class="introduce">
				<view class="iconfont icon-u5 "  ></view>  
				<view class="introduce-right">
					<view class="text">评价奖励 </view>
					<view class="content">1）购买的商品售价高于或等于20元时，会员在订单</view>
					<view class="content">完成3个月内对商品进行有效评价（用户评价字数须</view>
					<view class="content">应在10个以上）将享受相应的奖励。</view>
					<view class="content">2）用户只能评价自己帐号的订单商品, 不同等级会员</view>
					<view class="content">给予不同数量的积分奖励。</view>
					<view class="content">普通会员奖励: 5积分/条</view>
					<view class="content">黄金会员奖励: 10积分/条</view>
					<view class="content">铂金会员奖励: 15积分/条</view>
					<view class="content">经纪人奖励: 20积分/条</view>
				</view>
			</view>
			<view class="introduce">
				<view class="iconfont icon-u7 "  ></view>  
				<view class="introduce-right">
					<view class="text">专享活动 </view>
					<view class="content">黄金及以上会员专享活动，不定期福利优先享（看电</view>
					<view class="content">影、烘焙课程、线下趴等）</view>
				</view>
			</view>
			<view class="introduce">
				<view class="iconfont icon-u3 "  ></view>  
				<view class="introduce-right">
					<view class="text">会员特价 </view>
					<view class="content">黄金及以上会员可在指定页面，享有会员价优惠商</view>
					<view class="content">品。</view>
				</view>
			</view>
			<view class="introduce">
				<view class="iconfont icon-u6 "  ></view>
				<view class="introduce-right">
					<view class="text">生日礼包 </view>
					<view class="content">完善生日资料后, 在生日周期间获得惊喜生日礼包。</view>
					<view class="content">1）特权对象: 经纪人及完善生日信息的会员</view>
					<view class="content">2）特权内容: 积分和优惠券好礼（以实际发放的为</view>
					<view class="content">准）</view>
					<view class="content">3）领取方式: 系统自动发放</view>
					<view class="content">4）领取次数: 同一自然年内仅可获得一份生日礼包, </view>
					<view class="content">生日礼包领取有效期为7天, 生日前7天开始发放, 若有</view>
					<view class="content">效期内未领取, 不再补发生日礼包</view>
				</view>
			</view>
		</view>
		
		<!-- 积分介绍 -->
		<view class="nums" v-if="tabCurrentIndex==1"  v-model="tabCurrentIndex">
			<view class="top">
				1.什么是积分？
			</view> 
			<view class="content">
				积分决定会员等级, 积分越高会员等级越高, 享受到的会员
			</view>
			<view class="content">
				权益越大。会员通过在本亿拼惠上完成登录、购物、评价、晒
			</view>
			<view class="content">
				单等行为所获得相应的积分。
			</view>
			<view class="top">
				2.如何获得积分
			</view>
			<view class="num">
				<view class="num1">来源</view><view class="top-num2">积分奖励</view><view class="top-num3">详细说明</view>
				<view class="num1">新手欢迎奖励</view><view class="num2">+10</view><view class="num3">只能领取一次</view>
				<view class="num1">设置头像</view><view class="num2">+5</view><view class="num3">设置头像，只能领取一次</view>
				<view class="num1">设置昵称</view><view class="num2">+5</view><view class="num3">设置昵称，只能领取一次</view>
				<view class="num1">完善个人信息</view><view class="num2">+20</view><view class="num3">设置性别，生日，城市，职业，个人签名，喜欢的分类，需全部设置完才能领取，只能领取一次</view>
				<view class="num1">成功关注1位达人</view><view class="num2">+5</view><view class="num3">首次关注后发放</view>
				<view class="num1">首次分享商品或专题</view><view class="num2">+5</view><view class="num3">首次完成分享后发放</view>
				<view class="num1">首次收藏商品或专题</view><view class="num2">+5</view><view class="num3">首次完成收藏后发放</view>
				<view class="num1">首次购物成功</view><view class="num2">+5</view><view class="num3">付款成功即发放</view>
				<view class="num1">首次完成评价</view><view class="num2">+10</view><view class="num3">评价成功即发放</view>
				<view class="num1">每日登录</view><view class="num2">+5</view><view class="num3">每日首次登陆成功后发放</view>
				<view class="num1">每日签到</view><view class="num2">+10</view><view class="num3">每日完成签到后发放，签到累计满8天额外奖励20</view>
				<view class="num1">分享商品或专题</view><view class="num2">+5</view><view class="num3">每次成功分享即可获得奖励，每日上限15</view>
				<view class="num1">邀请好友</view><view class="num2">+10</view><view class="num3">好友注册成功后即可获得奖励</view>
				<view class="num1">好友首次下单成功</view><view class="num2">+20</view><view class="num3">邀请好友首次下单并完成付款可获得奖励</view>
				<view class="num1">购物奖励</view><view class="num2">结算金额</view><view class="num3">付款完成后按商品结算金额1:1的比例发放（优惠券、运费除外）</view>
				<view class="num1">购物天数达标</view><view class="num2">+10</view><view class="num3">自然月内购物天数达到2天，且订单状态已完成，次月15号发放</view>
				<view class="num1">评价奖励</view><view class="num2"><view class="content">+5/+10/</view><view class="content">+15/+20</view></view><view class="num3">不同等级会员积分奖励不同</view>
			</view>
			<view class="top">
				3.哪些情况会扣除积分
			</view>
			<view class="content">
				您发表的商品评价被删除，扣除的积分与当时获得的值相同;
			</view>
			<view class="content">
				退货，扣除的积分与当时获得的值相同;
			</view>
			<view class="top">
				4.哪些情况不奖励积分
			</view>
			<view class="content">
				• 商品评价未达标：
			</view>	
			<view class="content">
				拷贝自己或者他人评价内容超过80%以上；
			</view>	
			<view class="content">
				使用标点符号过多；
			</view>	
			<view class="content">
				评价内容没有任何参考价值；
			</view>	
			<view class="content">
				被5名以上网友举报或者违反法律法规；
			</view>	
			<view class="content">
				• 评价未达标数超过5条，则该id号一年内参与的产品评价不奖励积分 无效评价不奖励积分，评价赠品不奖励积分；
			</view>	
			<view class="content">
				• 同一订单或相隔15日内订单中的相同商品，只有一次评价可以获得积分；
			</view>
			<view class="content">
				• 购买时间相差超过15日的不同订单中的相同商品，可以分别评价并获得积分；
			</view>
			<view class="top">
				5.关于积分特殊说明
			</view>
			<view class="content">
				• 普通会员每日登录不送积分；
			</view>
			<view class="content">
				• 商品单价低于20元，评价不送积分；
			</view>
			<view class="content">
				• 订单实际支付金额(现金、银行卡)小于20元，不送积分；（若订单拆分，则按拆分后的子订单金额计算）
			</view>
			<view class="content">
				• 购物天数送积分，限黄金会员及以上会员享有，以订单的完成时间为不同天次的计量单位；
			</view>
			<view class="content">
				• 购物积分中的结算金额是指以现金、银行卡支付的金额，不包括使用优惠券、积分等其他方式支付的金额，商品运费部分不计入结算金额；
			</view>
 		</view>
		
		
		
		
	</view>
	
	
</template>

<script >
	
	export default {
		components: {
			
		},
		data() {
			return {
				tabCurrentIndex: 0,
				navList: [{
						state: 0,
						text: '会员介绍',
						loadingType: 'more',
						commentList: [],
					},
					{
						state: 1,
						text: '积分介绍',
						loadingType: 'more',
						commentList: [],
					},
					
				],
				
			};
		},
		onLoad(options) {
			this.tabCurrentIndex = + parseInt(options.state); 
			uni.startPullDownRefresh();
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		
		methods: {
			//swiper 切换
			changeTab(e){
				this.tabCurrentIndex = e.target.current;
			},
			//顶部tab点击
			tabClick(index){
				this.tabCurrentIndex = index;
			},
		}
	}
</script>

<style lang="scss">
	.container{
		margin: 20upx;
		font-size: 25upx;
		background-color: #fff;
	}
	.content{
		padding-bottom: 10upx;
	}
	.nums{
		color: #9d9d9d;
		padding: 20upx;
	}
	.top{
		font-size: 30upx;
		padding-top: 30upx;
		padding-bottom: 10upx;
		font-weight: bold ;
	}
	.top-top1{
		display: flex;
		.top-top{
			border: 4upx solid #f5f5f5;
			margin: 10upx auto;
			.iconfont{
				color: #ffa847;
				font-size: 70upx;
				text-align: center;
			}
			.page{
				padding-left:10upx;
				display: flex;
				width: 100%;
				margin: 20upx;
			}
		}
	}
	.introduce{
		display: flex;
		margin-bottom: 40upx;
		margin-top: 40upx;
		.yticon{
			font-size: 60upx;
			color: #E02E24;
			margin: 10upx;
			padding-right: 30upx;
		}
		.iconfont{
			font-size: 70upx;
			color: #E02E24;
			margin: 10upx;
			padding-right: 30upx;
		}
		.introduce-right{
			
			.text{
				font-size: 30upx;
				font-weight: bold ;
			}
		}
	}
	.num{
		display: flex;
		flex-wrap: wrap; 
		text-align: center;
		border: 1upx solid #d3d3d3;
		
		.num1{
			width: 30%;
			border: 1upx solid #d3d3d3;
			background-color: #f5f5f5;
			min-height: 80upx;
		}
		.num2{
			width: 25%;
			border: 1upx solid #d3d3d3;
			padding: 10upx;
		}
		.num3{
			width: 45%;
			border: 1upx solid #d3d3d3;
		}
		.top-num2{
			width: 25%;
			background-color: #f5f5f5;
			border: 1upx solid #d3d3d3;
		}
		.top-num3{
			width: 45%;
			background-color: #f5f5f5;
			border: 1upx solid #d3d3d3;
		}
	}
	
	.introduce-num{
		display: flex;
		flex-wrap: wrap; 
		text-align: center;
		border: 1upx solid #d3d3d3;
		
		.iconfont{
			color: #E02E24;
			font-size: 30upx;
		}
		.iconfont1{
			color: #ffa847;
			font-size: 70upx;
		}
		.yticon{
			color: red;
			font-size: 30upx;
		}
		.introduce-num1{
			width: 20%;
			border: 1upx solid #d3d3d3;
			background-color: #f5f5f5;
			min-height: 80upx;
			padding-top: 20upx;
		}
		.introduce-num2{
			width: 20%;
			border: 1upx solid #d3d3d3;
			padding-top: 20upx;
		}
		.introduce-num3{
			width: 20%;
			border: 1upx solid #d3d3d3;
			padding-top: 20upx;
		}
		.introduce-num4{
			width: 20%;
			border: 1upx solid #d3d3d3;
			padding-top: 20upx;
		}
		.introduce-num5{
			width: 20%;
			border: 1upx solid #d3d3d3;
			padding-top: 20upx;
		}
		.top-introduce-num2{
			width: 20%;
			background-color: #f5f5f5;
			border: 1upx solid #d3d3d3;
			padding-top: 20upx;
		}
		.top-introduce-num3{
			width: 20%;
			background-color: #f5f5f5;
			border: 1upx solid #d3d3d3;
			padding-top: 20upx;
		}
		.top-introduce-num4{
			width: 20%;
			background-color: #f5f5f5;
			border: 1upx solid #d3d3d3;
			padding-top: 20upx;
		}
		.top-introduce-num5{
			width: 20%;
			background-color: #f5f5f5;
			border: 1upx solid #d3d3d3;
			padding-top: 20upx;
		}
	}
	.page{
		margin: 30upx;
		margin-bottom: 60upx;
		
	}
	
	.navbar{
		display: flex;
		height: 40px;
		padding: 0 5px;
		background: #fff;
		box-shadow: 0 1px 5px rgba(0,0,0,.06);
		position: relative;
		z-index: 10;
		.nav-item{
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: $font-color-dark;
			position: relative;
			&.current{
				color: $base-color;
				&:after{
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 44px;
					height: 0;
					border-bottom: 2px solid $base-color;
				}
			}
		}
	}

</style>
